<style>
    .required-tip{
        display: inline-block;
        color:#f00505;
        margin-left: 5px;
        font-size: 20px;
        padding-top: 5px;
    }
</style>

<blockquote class="layui-elem-quote">
  修改轮播图
</blockquote>

<div style="padding:20px">
    <form class="layui-form" action="">
      
      <input type="hidden" name="id" value="{$item.id}" />
      <input type="hidden" name="lang" id="lang" value="{$item.lang}" />

        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">上传图片</label>
              
              <div class="layui-input-inline layui-input-wrap">
                <img src="{$item.imgurl}" width="160" height="160" id="imgurl" />
                <input type="hidden" name="imgurl" id="cover" value="{$item.imgurl}" />
              </div>

              <div class="layui-form-mid" style="padding: 0!important;"> 
                <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode" id="ID-upload-demo-btn">上传图片</button>
              </div>

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">图片标题</label>
            <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" placeholder="图片标题" value="{$item.title}" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">语言版本</label>
            <div class="layui-input-block">

              <select lay-filter="lang">
                <option value="zh-cn" {if condition="$item.lang eq 'zh-cn'"} selected {/if}>简体中文</option>
                <option value="en-us" {if condition="$item.lang eq 'en-us'"} selected {/if}>英文</option>
              </select>

          </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" value="{$item.sort}" placeholder="请输入数字，数字越大越靠前" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">别名</label>
          <div class="layui-input-block">
              <input type="text" name="alias" value="{$item.alias}" placeholder="根据别名进行分类" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">链接</label>
          <div class="layui-input-block">
              <input type="text" name="url" value="{$item.url}" placeholder="设置图片跳转链接" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">图片描述</label>
          <div class="layui-input-block">
          <textarea placeholder="图片描述" class="layui-textarea" name="descriptions">{$item.descriptions}</textarea>
          </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
              <input type="radio" name="isshow" value="1" title="显示" {if condition="$item.isshow eq 1"}checked{/if} />
              <input type="radio" name="isshow" value="0" title="隐藏" {if condition="$item.isshow eq 0"}checked{/if}  />
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
            </div>
        </div>

    </form>
</div>

<script>

layui.use(['form'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;
  var util = layui.util;

  // 提交事件
  form.on('submit(demo1)', function(data){
    var field = data.field; // 获取表单字段值

    $.post("{:url('web.swiper/edit')}",data.field,function(res){
      console.log(res)
      if(res.code==1){
        layer.msg(res.msg,function(){
          window.location.href="{:url('web.swiper/index')}"
        })
      }

    },"json")

    return false; // 阻止默认 form 跳转
  });










    // 单图片上传
    var upload = layui.upload;

    var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn',
    url: '{:url("Upload/index")}', // 实际使用时改成您自己的上传接口即可。
    before: function(obj){
      // 预读本地文件示例，不支持ie8
      // obj.preview(function(index, file, result){
      //   $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
      // });
      
      // element.progress('filter-demo', '0%'); // 进度条复位
      // layer.msg('上传中', {icon: 16, time: 0});
    },
    done: function(res){

      console.log(res)
      // 若上传失败
      // if(res.code > 0){
      //   return layer.msg('上传失败');
      // }
      // 上传成功的一些操作
      // …
        if(res.errno == 0){
          $("#imgurl").attr("src",res.data.url);
          $("#cover").val(res.data.url);
        }else{
          layer.msg('上传失败');
        }



      $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
    },
    error: function(){
      // 演示失败状态，并实现重传
      // var demoText = $('#ID-upload-demo-text');
      // demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      // demoText.find('.demo-reload').on('click', function(){
      //   uploadInst.upload();
      // });
    },
    // 进度条
    progress: function(n, elem, e){
      //element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });


  form.on('select(lang)', function(el){
    var value = el.value; // 获得被选中的值
    $("#lang").val(value)
  });




});
</script>
 